import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import { actionCreators } from './store' 
import { NavLink } from 'react-router-dom'
import {
  HeaderBox,
  HeaderWrapper,
  HeaderContent,
  HeaderNav,
  SearchWrapper,
  SearchButton,
  NavItem,
  HeaderSearch,
  MessageInfo,
  OtherSearchWrapper,
  OtherHeaderContent
} from './style'

class Header extends Component {
  render() {
    const { focused, active, handleSearchFocus, handleSearchBlur, handleSwitch } = this.props
    return (
      <HeaderBox>
        <HeaderWrapper ref={(div) => {this.div = div}}>
          <HeaderContent>
            <i className="iconfont logo">&#xe809;</i>
            <HeaderNav>
              <NavLink to='/' exact activeClassName='active' className='nav-item'>
                首页
              </NavLink>
              <NavLink to='/explore' activeClassName='active' className='nav-item'>
                发现
              </NavLink>
              <NavLink to='/question' activeClassName='active' className='nav-item'>
                等你来答
              </NavLink>
            </HeaderNav>
            <SearchWrapper>
              <CSSTransition
                in={focused}
                timeout={400}
                classNames={'slide'}
              >
                <HeaderSearch
                  className={focused ? 'focused' : ''} 
                  onFocus={handleSearchFocus}
                  onBlur={handleSearchBlur}
                ></HeaderSearch>
              </CSSTransition>
              <i 
                className={focused ? 'iconfont icon-focused search' : 'iconfont search'}
              >&#xe67c;</i>
            </SearchWrapper>
            <SearchButton className={focused ? 'appear' : ''} >提问</SearchButton>
            <MessageInfo>
              <i className="iconfont">&#xe60b;</i>
              <i className="iconfont">&#xe8c6;</i>
            </MessageInfo>
          </HeaderContent>
          <OtherHeaderContent>
            <i className="iconfont logo-s">&#xe809;</i>
            <HeaderNav>
              <NavItem className="active-s">推荐</NavItem>
              <NavItem>关注</NavItem>
              <NavItem>热榜</NavItem>
            </HeaderNav>
            <SearchButton className='btn-s'>提问</SearchButton>
            <OtherSearchWrapper></OtherSearchWrapper>
          </OtherHeaderContent>
        </HeaderWrapper>
      </HeaderBox>
    )
  }
  componentDidMount() {
    let _this = this
    window.onscroll = function() {
      if(document.documentElement.scrollTop >= 174) {
        _this.div.style.transform = 'translateY(-52px)'
      } else {
        _this.div.style.transform = 'translateY(0)'
      }
    }
  }
}

const mapStateToProps = (state) => {
  return {
    focused: state.getIn(['header','focused']),
    active: state.getIn(['header', 'active'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleSearchFocus() {
      dispatch(actionCreators.searchFocus())
    },
    handleSearchBlur() {
      dispatch(actionCreators.searchBlur())
    },
    handleSwitch(page) {
      dispatch(actionCreators.changePage(page))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)